/*
我是公共组件新增卡片
 */

<template>
  <div class="AddNewCard">
    <el-card>
      <el-form
        ref="form"
        :model="formData"
        label-position="top"
        :rules="commerceEnum[enumName + 'Rules']"
      >
        <el-row>
          <el-col
            v-for="(value, key) in commerceEnum[enumName + 'Addnew']"
            :key="value.name"
            :span="value.span"
          >
            <el-form-item ref="form" :prop="key" :label="value.name">
              <el-cascader
                v-if="value.type === 'cascader'"
                v-model="formData[key]"
                size="medium "
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"
              />
              <el-input
                v-else
                v-model="formData[key]"
                :disabled="value.disable"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commerceEnum from '@/constan/commerce'
import { regionData } from 'element-china-area-data'

export default {
  name: 'AddNewCard',
  props: {
    enumName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formData: {
        id: this.$route.params.value
      },
      commerceEnum,
      formCardName: this.enumName + 'Form',
      options: regionData
    }
  },
  computed: {
    // rules() {
    //   return this.commerceEnum[this.enumName + 'Rules']
    // }
  },
  async created() {
    // 动态生成表单
    for (const key in commerceEnum[this.enumName]) {
      if (key === 'location') continue
      this.$set(this.formData, key, '')
    }
    this.$emit('getDEtail')
  },
  methods: {
    handleChange(value) {
    },
    async submit() {
      await this.$refs.form.validate()
      this.$emit('submit', this.formData)
    }
  }
}
</script>

<style lang="scss">
.AddNewCard {
  .el-input__inner {
    background-color: #f8f5f5;
    border-color: transparent;
  }

  .el-card {
    .el-card__body {
      padding: 0 40px;
    }
  }
  .el-form-item__label {
    margin-top: 20px;
  }

  .el-cascader {
    width: 100%;
  }
}

</style>

<style lang="scss" scoped>
.AddNewCard {
  width: 95%;
  margin: 20px auto;

  .el-card {
    border-radius: 10px;
    .elstep {
      width: 40%;
      margin: 75px auto;
    }
    .el-form-item {
      margin: 0 20px;
    }
  }
}
</style>
